<template>
  <div class="card-item">
    <img width="70" :src="icon" />
    <div style="flex-grow: 1;padding: 5px 20px">
      <h5 class="card-item-title" v-if="props.title">{{props.title}}</h5>
      <h3 class="card-item-money" style="text-align: center">
        ￥
        <span v-if="hide">******</span>
        <span v-else>
          {{props.amount}}
        </span>
        <el-icon @click="hide =false" v-if="hide" style="margin-left: 5px;"><Hide /></el-icon>
        <el-icon @click="hide = true" v-else  style="margin-left: 5px;"><View /></el-icon>
      </h3>
      <div class="card-item-btns">
        <slot name="action"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

interface Props {
    title: string;
    icon: string;
    amount: string | number;
}

const hide = ref(false)

// const { amount, title, icon } = withDefaults(defineProps<Props>(), {
//     title: '',
//     amount: '',
//     icon: ''
// });

const props = defineProps({
    title: '',
    amount: '',
    icon: ''
}) ;


// console.log(amount)
</script>

<style scoped lang="scss">
.card-item {
  display: flex;
  background: #fff;
  border-radius: 5px;
  height: 154px;
  min-width: 300px;
  .card-item-title {
    font-size: 13px;
    font-weight: 700;
  }
  .card-item-money {
      font-weight: 700;
      color: #333;
      font-size: 20px
    }

  .card-item-btns {
    display: flex;
    justify-content: center
  }
}
</style>
